<template>
  <div class="source-statistics">
    <div class="source-statistics-title">
      <img src="../../assets/screen/cunliang.png" />
    </div>
    <div class="source-statistics-content">
      <div class="content-title">
        <img src="../../assets/screen/fenlei.png" />

        <i
          class="el-icon-refresh"
          style="
            color: #0064c8;
            font-weight: 600;
            font-size: 22px;
            cursor: pointer;
            margin-right: 15px;
          "
          @click="refresh"
        ></i>
      </div>
      <div class="classification">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="资产类型：">
            <el-select
              v-model="form.propertyTypeCode"
              placeholder="请选择"
              @change="propertyTypeChange"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in classificationList"
                :key="item.propertyTypeCode"
                :label="item.propertyTypeName"
                :value="item.propertyTypeCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在社区：">
            <el-select
              v-model="form.propertyCommunity"
              placeholder="请选择"
              @change="propertyChange"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in communityList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资产类别：">
            <el-select
              v-model="form.propertyCategoryId"
              placeholder="请选择"
              @change="propertyLeibieChange"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in pcategoryList"
                :key="item.propertyCategoryId"
                :label="item.pcategoryName"
                :value="item.propertyCategoryId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-title">
        <img src="../../assets/screen/dikuai.png" />
      </div>
      <div class="content-unit-title">
        <img
          src="../../assets/screen/sp-list.png"
          v-if="propertyTypeCode === 'property_type_shangpu'"
        />
        <img
          src="../../assets/screen/gy-list.png"
          v-else-if="propertyTypeCode === 'property_type_gongyu'"
        />
        <img
          src="../../assets/screen/zht-list.png"
          v-else-if="propertyTypeCode === 'property_type_zongheti'"
        />
        <img
          src="../../assets/screen/bg-list.png"
          v-else-if="propertyTypeCode === 'property_type_bangong'"
        />
        <img
          src="../../assets/screen/gycf-list.png"
          v-else-if="propertyTypeCode === 'property_type_gongyechangfang'"
        />
      </div>
      <div class="content-unit-input">
        <el-input
          v-model="form.propertyName"
          placeholder="请输入内容"
          @change="propertyChange"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="massif-info">
        <div
          v-for="(item, index) in classificationUnitList"
          :key="index"
          :class="[
            classificationIndex === index
              ? 'classificationActive massif-info-item'
              : 'massif-info-item',
          ]"
          @click="itemHandleClick(item, index)"
        >
          <p>{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</p>
          <p>{{ item.propertyName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  innerScreenPropertyType,
  innerScreenPropertyList,
  areaList,
} from "@/api/screen";
import { propertyPcategoryList } from "@/api/shops";
export default {
  data() {
    return {
      total: 0,
      threeKmCount: 0,
      oneKmCount: 0,
      sourceType: undefined,
      remediationStatus: undefined,
      activeIndex: 0,
      classificationList: [],
      communityList: [], // 所在社区listareaList
      classificationUnitList: [],
      pcategoryList: [], // 资产类别
      classificationIndex: undefined,
      propertyTypeCode: "",
      form: {
        propertyCategoryId: "",
        propertyTypeCode: "",
        propertyCommunity: "",
        propertyName: "",
      },
    };
  },
  methods: {
    getAreaList() {
      let params = {
        areaName: "",
      };
      areaList(params).then((res) => {
        if (res.code == 200) {
          this.communityList = res.data;
          this.communityList.unshift({
            areaName: "全部",
            areaId: "",
          });
        }
      });
    },
    refresh() {
      this.form.propertyTypeCode = this.classificationList[0].propertyTypeCode;
      this.$bus.$emit("getPropertyTypeCode", this.form);
      this.activeIndex = 0;
      this.classificationIndex = undefined;
      this.form.propertyCategoryId = "";
      // let item = this.classificationUnitList[this.classificationIndex];
      // this.$bus.$emit("getProGis", item);
      // itemChange
      this.$emit("itemChange", 2);
      this.postInnerScreenPropertyList();
    },
    // 资产类别
    getPropertyPcategoryList() {
      propertyPcategoryList().then((res) => {
        this.pcategoryList = res.data;
        this.pcategoryList.unshift({
          pcategoryName: "全部",
          propertyCategoryId: "",
        });
      });
    },

    // 资产类型选择
    propertyTypeChange(type) {
      if (type) {
        this.$bus.$emit("setAllProperty", type);
      } else {
        this.$bus.$emit("setAllProperty", "all");
      }
      this.$bus.$emit("getPropertyTypeCode", this.form);
      this.postInnerScreenPropertyList();
    },
    propertyChange(value) {
      // this.propertyName = value;
      this.postInnerScreenPropertyList();

      this.$bus.$emit("getPropertyTypeCode", this.form);
      this.$bus.$emit("getProInfoEvent", {
        propertyTypeCode: this.form.propertyTypeCode,
        propertyId:
          this.classificationUnitList.length > 0 &&
          this.classificationUnitList[0] &&
          this.classificationUnitList[0].propertyId,
      });
    },
    propertyLeibieChange(value) {
      this.$bus.$emit("getPropertyTypeCode", this.form);
      this.postInnerScreenPropertyList();
    },
    getInnerPropertyType() {
      innerScreenPropertyType().then((res) => {
        if (res.code === 200) {
          this.classificationList = res.data;
          this.classificationList.unshift({
            propertyTypeName: "全部",
            propertyTypeCode: "",
          });
          this.form.propertyTypeCode =
            this.classificationList[this.activeIndex].propertyTypeCode;
          // this.$bus.$emit("setAllProperty", "all");

          this.$bus.$emit("getPropertyTypeCode", this.form);
          this.postInnerScreenPropertyList();
        }
      });
    },
    postInnerScreenPropertyList() {
      innerScreenPropertyList(this.form).then((res) => {
        if (res.code === 200) {
          this.classificationUnitList = res.data;

          // 默认
          // this.$bus.$emit("getProInfoEvent", this.classificationUnitList[0]);
        }
      });
    },
    itemHandleClick(item, index) {
      // this.curScreen = 1;
      this.classificationIndex = index;
      this.$bus.$emit("getProInfoEvent", item);
      // this.$bus.$emit("setScreenEvent", 1);
      this.$emit("itemChange", 1);
    },
  },
  mounted() {
    this.getInnerPropertyType();
    this.getAreaList();
    this.getPropertyPcategoryList();
    this.$bus.$on("getProInfoEvent", (mes) => {
      let curIndex = this.classificationUnitList.findIndex(
        (v) => v.propertyId === mes.propertyId
      );
      this.classificationIndex = curIndex;
    });
  },
};
</script>

<style lang="scss" scoped>
.source-statistics {
  margin-left: 25px;
  width: 308px;
  .source-statistics-title {
    width: 100%;
    height: 38px;

    img {
      width: 92%;
    }
  }
  .source-statistics-content {
    width: 100%;
    height: calc(100vh - 235px);
    background: rgba(15, 24, 45, 0.7);
    border-radius: 8px 8px 8px 8px;
    // opacity: 0.9;
    .content-title {
      width: 100%;
      height: 28px;
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 150px;
        margin-top: 15px;
      }
    }
    .classification {
      margin-top: 40px;
      .active {
        box-shadow: inset 0px 0px 11px 0px #fce308;
      }
      .classification-th {
        width: 100%;
        display: flex;
        th {
          width: 50%;
          font-size: 16px;
          color: #e6fffc;
          font-weight: 600;
        }
      }
      .classification-td {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        cursor: pointer;
        background: #192336;
        border-radius: 4px 4px 4px 4px;
        padding: 3px 0;
        td {
          &:nth-child(1) {
            display: flex;
            align-items: center;
            width: 50%;
            text-align: left;
            margin-left: 12%;
            img {
              width: 24px;
              height: 24px;
              margin-right: 5px;
            }
          }
          &:nth-child(2) {
            flex: 1;
          }
        }
      }
    }
    .content-unit-title {
      // height: 30px;
      // width: 160px;
      margin-top: 30px;
      img {
        width: 100%;
      }
    }
    .massif-info {
      height: calc(100vh - 555px);
      overflow-y: auto;
      .massif-info-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        margin: 0 auto;
        width: 90%;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        p {
          &:nth-child(1) {
            padding-left: 20px;
          }
          &:nth-child(2) {
            padding-left: 22px;
          }
        }
      }
      .classificationActive {
        background: linear-gradient(
          90deg,
          rgba(0, 163, 255, 0.6) 0%,
          rgba(255, 255, 255, 0) 100%
        );
        border-radius: 8px 8px 8px 8px;
        color: rgba(207, 207, 207, 1);
      }
    }
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>

<style lang="scss">
.content-unit-input {
  width: 90%;
  margin: 10px auto;
  .el-input__inner {
    background-color: transparent;
    border: 1px solid #8db7ff;
    color: #000;
  }
}
.source-statistics {
  .el-form-item__label {
    color: #fff;
  }
  .el-input--medium .el-input__inner {
    background: transparent;
    color: rgba(136, 136, 136, 1);
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
